<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq-3.6.0.js"></script>
    <script src="./flexible.js"></script>
    <style>
        header {
            width: 100%;
            height: 3.5733rem;
            background-color: rgb(7, 17, 27, 0.2);
        }
        
        .title {
            width: 100%;
            height: 2.8267rem;
            overflow: hidden;
        }
        
        .brand {
            display: flex;
            margin-top: .64rem;
            margin-left: .64rem;
        }
        
        .left {
            width: 1.7067rem;
            height: 1.7067rem;
            background-color: pink;
            border-radius: .1067rem;
            color: white;
        }
        
        .middle {
            height: 1.7067rem;
            width: 6.9067rem;
            margin-left: .4267rem;
        }
        
        .one {
            margin-top: .1067rem;
            display: flex;
        }
        
        .one>img {
            width: .6667rem;
            height: .48rem;
        }
        
        .one>div {
            font-size: .4267rem;
            color: rgb(255, 255, 255);
            font-weight: bold;
            line-height: .48rem;
            margin-left: .16rem;
        }
        
        .two {
            height: .32rem;
            font-size: .32rem;
            color: rgb(255, 255, 255);
            font-weight: 200;
            line-height: .32rem;
            margin-top: .2133rem;
        }
        
        .three {
            /* height: .32rem;
            width: 180px; */
            margin-top: .2667rem;
            display: flex;
            margin-bottom: .1067rem;
        }
        
        .three>img {
            width: .32rem;
            height: .32rem;
        }
        
        .three>div {
            height: .32rem;
            font-size: .2667rem;
            color: rgb(255, 255, 255);
            font-weight: 200;
            line-height: .32rem;
        }
        
        .affiche {
            width: 100%;
            height: .7467rem;
            background-color: rgb(7, 17, 27, 0.2);
            display: flex;
        }
        
        .affiche>img {
            margin-left: .32rem;
            width: .7467rem;
            /* line-height: .7467rem; */
            height: .4267rem;
            margin-top: .16rem;
        }
        
        .affiche div {
            line-height: .7467rem;
            font-size: .2667rem;
            color: rgb(255, 255, 255);
            font-weight: 200;
        }
        
        .intro {
            margin-left: .1067rem;
            margin-top: .0267rem;
            /* 文字不能完全显示转化为... */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .more {
            margin-left: .1067rem;
            margin-right: .32rem;
            margin-top: .0267rem;
        }
        
        .top {
            display: flex;
            width: 100%;
            text-align: center;
            background-color: rgb(255, 255, 255);
            color: rgb(77, 85, 93);
            font-size: .48rem;
            border-bottom: 1px solid rgb(7, 17, 27, 0.1);
        }
        
        .top div {
            height: 1.3333rem;
            line-height: 1.3333rem;
            flex: 1;
        }
        
        .item-content {
            display: none;
            width: 10rem;
        }
        
        .show {
            display: block;
        }
        
        .change {
            color: red;
        }
        
        footer {
            width: 100%;
            height: 1.3333rem;
            line-height: 1.3333rem;
            display: flex;
            background-color: #141d27;
            position: fixed;
            bottom: 0rem;
        }
        
        .car {
            width: 1.3333rem;
            height: 1.3333rem;
            background-color: rgb(42, 52, 60);
            border-radius: 50%;
            border: .16rem solid pink;
            margin-left: .48rem;
            margin-bottom: .2133rem;
            position: relative;
            bottom: .5333rem;
        }
        
        .price {
            width: .8rem;
            margin-left: .48rem;
            color: rgb(255, 255, 255, 0.4);
            font-size: .48rem;
        }
        
        .delivery {
            font-size: .32rem;
            color: white;
            margin-left: .6133rem;
            display: flex;
        }
        
        .sum {
            width: 2.8rem;
            background-color: rgb(255, 255, 255, 0.4);
            font-size: .3733rem;
            text-align: center;
            margin-left: 1.34rem;
        }
        
        .back {
            position: fixed;
            bottom: 1.15rem;
            white-space: inherit;
            width: 100%;
            height: 18.1867rem;
            display: none;
        }
        
        .back-top {
            width: 100%;
            height: 12rem;
            background-color: rgb(104, 111, 117, 0.5);
        }
        
        .back-bottom {
            width: 100%;
            height: 6.1867rem;
            background-color: rgb(71, 116, 116);
        }
        
        .carSum {
            height: .8rem;
            border: 1px solid gray;
            font-size: .3733rem;
            line-height: .8rem;
            display: flex;
            justify-content: space-between;
        }
        
        .carLeft {
            width: 2.6667rem;
            margin-left: .5333rem;
        }
        
        .carRight {
            width: 32px;
            margin-right: 20px;
        }
        
        .all {
            height: 1.2rem;
            width: 90%;
            margin: 0px auto;
            border-bottom: 1x solid gray;
            display: flex;
            justify-content: space-between;
            text-align: center;
            line-height: 1.2rem;
        }
        
        .glist {
            width: 4.5333rem;
            background-color: pink;
        }
        
        .del {
            width: 3.7333rem;
            background-color: aliceblue;
            font-size: .4267rem;
            display: flex;
            justify-content: space-between;
        }
        
        .del-left {
            font-size: .2667rem;
            width: .8rem;
            background-color: pink;
        }
        
        .del-right {
            width: 2.6667rem;
            background-color: pink;
            display: flex;
            justify-content: space-around;
        }
        
        .del-min {
            width: .7467rem;
            background-color: aquamarine;
        }
        
        .del-num {
            width: .7467rem;
            background-color: aquamarine;
        }
        
        .del-max {
            width: .7467rem;
            background-color: aquamarine;
        }
    </style>
</head>

<body style="margin: 0px; padding:0px;">
    <header>
        <div class="title">
            <div class="brand">
                <div class="left">img</div>
                <div class="middle">
                    <div class="one">
                        <img src="./img/brand@3x.png" alt="">
                        <div>粥品香坊(大运村)</div>
                    </div>
                    <div class="two">蜂鸟专送/38分钟送达</div>
                    <div class="three">
                        <img src="./img/decrease_1@3x.png" alt="">
                        <div>在线支付满28减5,满50减10</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="affiche">
            <img src="./img/bulletin@2x.png" alt="">
            <div class="intro">粥品香坊其烹饪粥料的秘方源于中国千年古法,再融合现代制作工艺... </div>
            <div class="more">></div>
        </div>
    </header>
    <div class="main">
        <div class="top">
            <div class="item">商品</div>
            <div class="item">评价</div>
            <div class="item">商家</div>
        </div>
        <div class="center">
            <div class="item-content">
                <iframe src="./02-goods.html" frameborder="0" style="width: 100%;height: 12rem;"></iframe>
            </div>
            <div class="item-content">评价的内容</div>
            <div class="item-content">商家的内容</div>
        </div>
    </div>
    <div class="back">
        <div class="back-top"></div>
        <div class="back-bottom">
            <div class="carSum">
                <div class="carLeft">购物车</div>
                <div class="carRight">清空</div>
            </div>
            <div class="all">
                <div class="glist"></div>
                <div class="del">
                    <div class="del-left">
                        <span class="del-price">￥</span>
                        <span></span>
                    </div>
                    <div class="del-right">
                        <div class="del-min">-</div>
                        <div class="del-num"></div>
                        <div class="del-max">+</div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="car">
        </div>
        <div class="price">￥</div>
        <div class="delivery">
            <span>另需配送费￥</span>
            <span></span>
        </div>
        <div class="sum">
            <span>￥</span>
            <span>20</span>
            <span>起送</span>
        </div>
    </footer>

</body>
<script>
    $(".item").click((e) => {
        $(e.target).addClass('change').siblings().removeClass('change');
        $($('.item-content').get($(e.target).index())).addClass('show').siblings().removeClass('show');
    });
    //$('.top>.item').first().triggerHandler('click');
    $('.top>.item')[0].click();
    $('.car').click(() => {
        $('.back').css({
            'display': 'block'
        })
    })
    $('.carRight').click(() => {
        $('.back').css({
            'display': 'none'
        })
    })
</script>

</html>